<template>
	<view :style="{ marginTop: source.margin + 'px', marginBottom: source.margin2 + 'px' }">
		<view class="title" v-if="data.is_show_title">{{ source.title }}</view>
		<swiper :display-multiple-items="3" class="slideproduct" :style="{ height: height }" indicator-color="rgba(0,0,0,0)" indicator-active-color="rgba(0,0,0,0)">
			<swiper-item v-for="(item, index) in source.img_list" :key="index">
				<view class="item">
					<image :src="item.url" class="img" mode="widthFix"></image>
					<view class="name" v-if="source.is_show_name">{{ item.name }}</view>
					<view class="price" v-if="source.is_show_price">&yen;{{ item.now_price }}</view>
					<view class="saled" v-if="source.is_show_sales_volume">销量{{ item.saled }}</view>
				</view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	export default {
		props: {
			source: [Object]
		},
		computed: {
			height () {
				let arr = [],result
				arr.push(this.source.is_show_name, this.source.is_show_price, this.source.is_show_sales_volume)
				result = arr.filter(item => !item)
				return `${uni.upx2px(370 - 45 * result.length)}px`
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';
.title {
	height: @height;
	font-size: @title;
	display:flex;
	align-items: center;
	justify-content: center;
}
.slideproduct {
	.item {
		margin: 0 15upx;
		.img {
			width: 100%;
			max-height: 230upx;
			display: block;
		}
		.name { font-size:@medium }
		.price { color:@red;font-size:@medium }
		.saled { color:@gray;font-size: @minSize; }
	}
}
</style>
